<template>
	<view class="mine">
		<view class="content">
			<view class="mine-info">
				<view class="mine-info-wrap">
					<view class="mine-info-avator">
						<image :src="minioUrl + user.photo"></image>
					</view>
					<view class="mine-nickname">
						<view class="mine-nickname__text">
							{{ user.nickname }}
						</view>
						<view class="mine-nickname__vip">
							普通会员
						</view>
					</view>
				</view>
			</view>
			
			<view class="mine-property content-wrap">
				<view class="mine-property__money">
					<view class="mine-property__number">0</view>
					<view class="mine-property__text">余额</view>
				</view>
				<view class="mine-property__integral">
					<view class="mine-property__number">0</view>
					<view class="mine-property__text">积分</view>
				</view>
				<view class="mine-property__coupon">
					<view class="mine-property__number">未开通</view>
					<view class="mine-property__text">省钱卡</view>
				</view>
			</view>
			
			<view class="mine-order content-wrap">
				<view class="mine-order__header">
					<view class="mine-order__header__title">
						我的订单
					</view>
					<view class="mine-order__header__searchAll">
						<text>查看全部</text>
						<u-icon name="arrow-right" color="#909399"></u-icon>
					</view>
				</view>
				<view class="mine-order-item">
					<u-grid
						:border="false"
						col="4"
					>
						<u-grid-item
							v-for="(item,index) in mineConst.orderItem"
							:key="index"
						>
							<u-icon
								:customStyle="{paddingTop:20+'rpx'}"
								:name="item.name"
								:size="22"
								 color="#f56c6c"
							></u-icon>
							<text class="grid-text">{{item.title}}</text>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
			
			<view class="mine-function content-wrap">
				<view class="mine-searched" v-if="searchHistory.length > 0">
					<view class="mine-searched-header">
						<view class="mine-searched-header__title">
							<u-icon name="clock-fill" color="#50bf8b"></u-icon>
							<text class="mine-function__title__text">浏览历史</text>
						</view>
						<view class="mine-searched-header__delete" @click="()=>{deleteShow = true}">
							<u-icon name="trash" color="#909399" size="20"></u-icon>
						</view>
					</view>
					<view class="mine-searched-list">
						<u-scroll-list :indicator="false">
							<view v-for="(item, index) in searchHistory" :key="index" class="mine-searched-item" 
							@click="collectionClick(item.id)">
								<image :src="minioUrl + item.image"></image>
							</view>
						</u-scroll-list>
					</view>
				</view>
				<view v-for="(item,index) in mineConst.mineFunction" :key="index" class="mine-function-item"
					@click="navTo(item.url)"
				>
					<view class="mine-function__title">
						<u-icon :name="item.icon" :color="item.color"></u-icon>
						<text class="mine-function__title__text">{{ item.title }}</text>
					</view>
					<view class="mine-function__more">
						<u-icon name="arrow-right" color="#909399"></u-icon>
					</view>
				</view>
			</view>
		</view>
		
		<u-popup :show="deleteShow" mode="center" round="10" :safeAreaInsetBottom="false" closeOnClickOverlay
			@close="cancelDelete"
		>
			<view class="delete-pop__wrap">
				<view class="delete__tips">确认将浏览记录清空?</view>
				<view class="delete__todo">
					<view class="delete__todo__think" @click="cancelDelete">我再想想</view>
					<view class="delete__todo__delete" @click="handleDelete">清空</view>
				</view>
			</view>
		</u-popup>
		
		<u-tabbar
			value="mine"
			:safeAreaInsetBottom="false"
			activeColor="#f56c6c"
		>
			<u-tabbar-item text="首页" name="index" icon="home" @click="tabbarClick"  ></u-tabbar-item>
			<u-tabbar-item text="分类" name="sort" icon="grid" @click="tabbarClick" ></u-tabbar-item>
			<u-tabbar-item text="购物车" name="cart" icon="shopping-cart" @click="tabbarClick" ></u-tabbar-item>
			<u-tabbar-item text="我的" name="mine" icon="account-fill"></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script lang="ts" setup>
	import { onMounted,ref,getCurrentInstance } from "vue"
	import { mineConst } from "./mineConst"
	
	const { proxy }: any = getCurrentInstance()
	const minioUrl = proxy.$minioUrl
	const user = ref({
		nickname: '',
		photo: '',
		id: ''
	})
	const searchHistory = ref(uni.getStorageSync("searchHistory"))
	const deleteShow = ref(false)
	
	const navTo = (url: string) => {
		uni.navigateTo({
			url: url
		})
	}
	
	const collectionClick = (id: number) => {
		uni.navigateTo({
			url: '/goods/goods_detail/goods_detail?id=' + id
		})
	}
	
	const cancelDelete = () => {
		deleteShow.value = false
	}
	
	const handleDelete = () => {
		uni.setStorageSync('searchHistory', [])
		deleteShow.value = false
		searchHistory.value = []
	}
	
	onMounted(()=>{
	  let storageToken = uni.getStorageSync("token")
	  let storageInfo = uni.getStorageSync("info")
	  if(storageInfo !== "" && storageToken !== ""){
	    user.value.nickname = storageInfo.nickname
	    user.value.photo = storageInfo.photo;
	    user.value.id = storageInfo.id;
	  }else{
	    uni.reLaunch({
	      url: "/user/login/login"
	    })
	    return
	  }
	  // proxy.ajax(proxy.api.getRealStatus, 'POST', {userId : storageInfo.id },function(resp: any) {
	  //   user.value.status = resp.data.status
	  // })
	})
	
	const tabbarClick = (e: string) => {
		uni.redirectTo({
			url: '/pages/'+e+"/"+e
		});
	}
</script>

<style lang="scss">
@import "style.scss"
</style>
